<template>
  <div id="threeDome"></div>
</template>

<script setup>
  import { onMounted } from 'vue'
  // 导入threejs
  import * as THREE from 'three'
  // 导入控制器
  import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

  onMounted(() => {
    initThree()
    addBtn()
  })

  const initThree = () => {
    // 创建创景
    const scene = new THREE.Scene()
    // 创建相机
    const camera = new THREE.PerspectiveCamera(
        45, // 视角
        window.innerWidth / window.innerHeight, // 宽高比
        0.1, // 近平面
        1000 // 远平面
    )
    // 创建渲染器
    const renderer = new THREE.WebGLRenderer()
    renderer.setSize(window.innerWidth, window.innerHeight)
    // 添加画布到dom中
    document.querySelector('#threeDome').appendChild(renderer.domElement)

    // 创建立方几何体
    const geometry = new THREE.BoxGeometry(1, 1, 1)
    // 创建材质
    const parentMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 })
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
    // 创建网格（物体）
    const parentCube  = new THREE.Mesh(geometry, parentMaterial)
    const cube = new THREE.Mesh(geometry, material)
    // 把cube添加到父元素中
    parentCube.add(cube)

    // 设置物体位移(两种方式)，有父元素就是相对父元素偏移，没有父元素相对世界（根元素）偏移
    // cube.position.x = 2
    // cube.position.set(2 , 0, 0)
    parentCube.position.set(-2, 0, 0)
    cube.position.set(2, 0, 0)

    // 设置物体的缩放(局部放大缩小相对于父元素)
    // parentCube.scale.set(2, 2, 2)
    // cube.scale.set(2, 2, 2)

    // 设置物体绕着x轴旋转(局部旋转，也是相对于父元素)
    parentCube.rotation.x = Math.PI / 4
    cube.rotation.x = Math.PI / 4

    // 将网格添加到场景中
    scene.add(parentCube)

    // 设置相机位置
    camera.position.z = 5
    camera.position.x = 2
    camera.position.y = 2
    // 看向哪里(默认看向原点0)
    camera.lookAt(0, 0, 0)

    // 添加时间坐标辅助器
    const axesHelper = new THREE.AxesHelper(3 )
    // 把坐标器添加到场景中
    scene.add(axesHelper)

    // 添加轨道控制器(加入控制器后模型就可以鼠标拖动了，实际上控制的是相机视角，相机绕着物体旋转)
    const controls = new OrbitControls(camera, renderer.domElement)
    // 设置带阻尼的惯性（拖动后有一个缓动）
    controls.enableDamping = true
    // 设置阻尼系数（就是拖动鼠标松开后惯性的大小，时间长久，数字越小惯性越大）
    controls.dampingFactor = 0.05
    // 利用控制器设置自动旋转
    // controls.autoRotate = true

    // 渲染函数
    function animate() {
      controls.update()
      requestAnimationFrame(animate)
      // 更改网格坐标实现旋转
      // cube.rotation.x += 0.001
      // cube.rotation.y += 0.001
      // 渲染
      renderer.render(scene, camera)
    }
    animate()

    // 监听窗口变化
    window.addEventListener('resize', () => {
      // 重置渲染器宽高比
      renderer.setSize(window.innerWidth, window.innerHeight)
      // 重置相机宽高比和投影矩阵
      camera.aspect = window.innerWidth / window.innerHeight
      // 更新相机投影矩阵
      camera.updateProjectionMatrix()
    })
  }

  const addBtn = () => {
    const btn = document.createElement('button')
    btn.innerText = '全屏'
    btn.id = 'fullBtn'
    btn.style.position = 'absolute'
    btn.style.top = '10px'
    btn.style.left = '10px'
    btn.style.zIndex = 9999
    btn.onclick = () => {
      // 判断是否全屏
      if (document.fullscreenElement) {
        // 如果全屏，退出全屏
        document.exitFullscreen()
        btn.innerText = '全屏'
      } else {
        // 如果没有全屏，全屏
        document.body.requestFullscreen()
        btn.innerText = '退出全屏'
      }
    }
    document.body.appendChild(btn)
  }

</script>

<style scoped>

</style>
